<template>
  <div class="login-container">
    <div class="login-logo">
      <img src="@/assets/img/login_wise.png" alt="Login Logo" />
    </div>
    <div class="welcome">
      <h2><strong>重置密码</strong></h2>
      <p class="login-prompt">请填写以下信息重置密码</p>
    </div>

    <van-form @submit="onSubmit">
      <van-cell-group>
        <van-field
          v-model="mobileNo"
          name="mobileNo"
          left-icon="phone-o"
          placeholder="请输入手机号"
          disabled
          :rules="[
            {
              required: true,
              message: '请填写手机号',
            },
            {
              message: '格式不正确',
              pattern: /^1[3-9]\d{9}$/,
            },
          ]"
        />
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="verifyCode"
          name="verifyCode"
          autocomplete="new-password"
          left-icon="comment-o"
          placeholder="请输入验证码"
          :rules="[
            {
              required: true,
              message: '请填写验证码',
            },
          ]"
        >
          <template #button>
            <van-button :disabled="countdown > 0" size="small" type="primary" @click="getCode">
              {{ buttonText }}</van-button
            >
          </template>
        </van-field>
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="newPassword"
          type="password"
          name="newPassword"
          autocomplete="new-password"
          left-icon="lock"
          placeholder="请输入新密码"
          :rules="[
            {
              required: true,
              message: '请填写新密码',
            },
          ]"
        />
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="confirmPassword"
          type="password"
          name="confirmPassword"
          left-icon="lock"
          placeholder="请确认新密码"
          :rules="[
            {
              required: true,
              message: '请确认新密码',
            },
            {
              required: true,
              message: '密码不一致',
              validator: validatePassword,
            },
          ]"
        />
      </van-cell-group>

      <div class="login-button">
        <van-button block type="primary" native-type="submit">重置密码</van-button>
      </div>
    </van-form>

    <div class="register-tip">
      <router-link to="/login">返回登录</router-link>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { aesEncrypt } from '@/utils/tools'
import { showToast } from 'vant'
import { getSmsCode, resetPsd } from '@/api/login'
import { useRoute, useRouter } from 'vue-router'
import { getStudentRequest } from '@/api/student'

const router = useRouter()
const route = useRoute()
const mobileNo = ref('')
const verifyCode = ref('')
const newPassword = ref('')
const confirmPassword = ref('')

const flowId = ref('')
const templateId = ref('TPIDRT001')

const countdown = ref(0)
const timer = ref<number | null>(null)

const buttonText = computed(() => {
  return countdown.value > 0 ? `${countdown.value}秒后重试` : '获取验证码'
})

const onSubmit = async (form: any) => {
  console.log('submit', form)
  // showToast('登录成功')
  const params = {
    verifyCode: form.verifyCode,
    newPassword: aesEncrypt(form.newPassword),
    confirmPassword: aesEncrypt(form.confirmPassword),
    flowId: flowId.value,
    templateId: templateId.value,
    studentNo: route.query.studentNo as string,
  }
  const res = await resetPsd(params)
  if (res.code == 200) {
    showToast('重置成功，即将跳转到登录页面')
    setTimeout(() => {
      router.push('/login')
    }, 1000)
  }
}
const getCode = async () => {
  if (countdown.value > 0) return
  countdown.value = 60
  timer.value = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0 && timer.value) {
      clearInterval(timer.value)
      timer.value = null
    }
  }, 1000)

  const res = await getSmsCode({
    clientNo: route.query.studentNo as string,
    templateId: templateId.value,
  })
  flowId.value = res.data.flowId
}
const validatePassword = (): boolean => {
  if (newPassword.value != confirmPassword.value) return false
  return true
}
onMounted(async () => {
  const { data } = await getStudentRequest({ studentNo: route.query.studentNo as string })
  mobileNo.value = data.mobileNo
})
</script>

<style scoped>
.login-container {
  padding: 20px;
  max-width: 500px;
  margin: 0 auto;
  background: linear-gradient(to bottom, #eff6ff, #f4f9ff, #f9fbff);
  min-height: 100vh;
}

.login-logo {
  text-align: center;
  margin: 20px 0;
}

.login-logo img {
  max-width: 200px;
  height: auto;
}

.welcome {
  text-align: center;
  margin: 30px 0 40px;
}

.welcome h2 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.login-prompt {
  font-size: 12px;
}
:deep(.van-cell-group) {
  &:not(:first-child) {
    margin-top: 10px;
  }
  .van-field__left-icon {
    .van-icon {
      color: #9ca3af;
      margin-right: 10px;
    }
  }
}
.remember-forgot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 15px 0;
}

.remember-me {
  font-size: 12px;
}

.forgot-password {
  color: #1989fa;
  font-size: 14px;
}

.login-button {
  margin: 30px 0;
}

.register-tip {
  text-align: center;
  color: #999;
  font-size: 12px;
  margin-top: 20px;
}
</style>
